<template>
  <div class="home">
    <div class="search-box">
      <van-field class="search-input" v-model="patientName" placeholder="请输入患者姓名" clearable @clear="reSet"/>
      <van-button size="small" icon="search"  @click="search">搜索</van-button>
      <van-button size="small" icon="replay" @click="reSet" v-if="false">重置</van-button>
    </div>
    <div class="patient-list" :key="refreshNode">
      <van-list offset="300" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" v-show="showPatientList">
        <van-cell v-for="item in list" :key="item.id" style="padding-right:0;" @click="$router.push('/' + item.id)">
          <div class="patient-info">
            <div>
              <span>姓名：</span>
              <span>{{item.name}}</span>
            </div>
            <div>
              <span>性别：</span>
              <span>{{item.sex === '1' ? '男' : '女'}}</span>
            </div>
            <div>
              <span>年龄：</span>
              <span>{{item.age}}</span>
            </div>
            <div>
              <span>手机号：</span>
              <span style="font-size:12px;">{{item.mobile}}</span>
            </div>
            <div>
              <span>诊断：</span>
              <span>{{item.hospitalization_diagnosis}}</span>
            </div>
            <div >
              <span style="display:block;">出院时间：</span>
              <span style="display:block;font-size:12px;">{{item.outer_hospital_time}}</span>
            </div>
          </div>
        </van-cell>
      </van-list>
      <!-- 通用错误 -->
      <van-empty image="error" description="服务器可能出了问题" v-show="showError" />
      <!-- 网络错误 -->
      <van-empty image="network" description="网络错误" v-show="showNetError" />
      <!-- 搜索提示 -->
      <van-empty image="search" description="没有任何患者" v-show="showSearchEmpty" />
    </div>
  </div>
</template>

<script>
  // @ is an alias to /src
  import HelloWorld from '@/components/HelloWorld.vue'

  export default {
    name: 'Home',
    components: {
      HelloWorld
    },
    data() {
      return {
        patientName: '',
        showError: false,
        showNetError: false,
        showSearchEmpty: false,
        list: [],
        loading: false,
        finished: false,
        showPatientList:true,
        cur_page:1,
        refreshNode:Math.random()
      }
    },
    created(){
      document.title = '患者档案'; 
    },
    watch:{
      finished(val){
        if(val){
          this.cur_page = 1
        }
      }
    },
    methods: {
      showAll() {
        this.showError = true
        this.showNetError = true
        this.showSearchEmpty = true
      },
      async onLoad() {
        
        // await new Promise((resolve,reject)=>{
        //   setTimeout(()=>{
        //     resolve()
        //   },1000)
        // })
        console.log('进入onLoad')
        let data = await this.getPatientList()
        if(data.error){
          this.showError = true
          this.showPatientList = false

          this.loading = false
          this.finished = true
          return 
        }
        if(data.total === 0){
          this.showSearchEmpty = true
          this.showPatientList = false

          this.loading = false
          this.finished = true
          return 
        }
        this.list = this.list.concat(data.list)
        this.cur_page++
        this.loading = false

        //数据全部加载完成
        if(data.cur_page * data.limit >= data.total){
          this.finished = true
        }
      },
      //重置列表
      resetListLoad(){
        console.log('进入resetListLoad')
        this.showPatientList = true
        this.list = []
        this.cur_page = 1
        this.$nextTick(()=>{
          this.loading = false
          this.finished = false
          this.refreshNode = Math.random()
        })
      },
      resetError(){
        this.showError= false
        this.showNetError= false
        this.showSearchEmpty= false

        this.showPatientList = true
      },
      async getPatientList() {
        console.log('进入getPatient')
        try {
          let {
            data: res
          } = await this.$http.post('/api/patient/getList', {
            name: this.patientName,
            cur_page: this.cur_page,
            limit: 10
          })
          //console.log(res.data)
          return res.data
        } catch (e) {
          //console.log(e.toString())
          //this.showNetError = true
          return {
            error:true
          }
        }
      },
      reSet(){
        this.patientName = ''
        this.resetError()
        this.resetListLoad()
      },
      search(){
        this.resetError()
        console.log('搜索')
        this.resetListLoad()
      }
    }
  }
</script>
<style lang="less" scoped>
  .home {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  .patient-list {
    //flex-grow: 1;
    //overflow-y: scroll;
    //height: 100%;
    border-top: 1px solid #eee;
    //border-image:linear-gradient(white,black) 30 30;
    .patient-info{
      display: flex;
      flex-wrap: wrap;
      >div{
        width: 50%;
        text-align: left;
        //padding: 5px;
      }
    }
  }

  .search-box {
    flex-shrink: 0;
    display: flex;
    padding: 15px;

    .search-input {
      background-color: #f7f7f7;
      border-radius: 50px;
      padding: 5px 10px;
    }

    .van-button {
      margin-left: 15px;
      flex-shrink: 0;
      //padding: 10px 5px;
    }
  }
</style>